State-Switch Controls: The Infamous Case of the "Mute" Button 狀態切換控制元件設計“靜音”按鈕

兩種設計方式：傳遞兩條資訊

1. 兩個獨立控制元件：狀態指示器 + 狀態切換按鈕

這種設計透過兩個UI元素分別傳遞當前狀態和切換後的狀態。例如：

Tesla應用的鎖車介面：鎖的圖示顯示當前狀態（已鎖定）。“解鎖”按鈕顯示使用者按下後的狀態（解鎖）。

優點：使用者無需推斷狀態，資訊清晰明確。

案例：Tesla應用同時展示狀態指示器（鎖車圖示）和狀態切換按鈕（解鎖按鈕），按下按鈕後兩者同步更新。

2. 單一控制元件：狀態切換按鈕

在這種設計中，按鈕同時顯示當前狀態和切換後的狀態。使用者需要透過控制元件推斷系統當前的狀態。

按鈕標籤顯示按下後系統的切換狀態：例如：播放按鈕切換為“暫停”時，按鈕標籤從“播放”變為“暫停”。

案例：OBS Studio的“開始錄製”按鈕按下後標籤變為“停止錄製”。

按鈕顯示當前狀態的視覺提示：透過按鈕的視覺效果（如顏色、陰影）顯示當前狀態。

案例：Microsoft Word中，“粗體”按鈕按下後顯示陰影，表示處於粗體模式。

WebEx設計中的問題分析

顏色混淆：按鈕的紅色用於表示“靜音”狀態，但紅色在其他地方也被隨意使用（如“離開會議”的按鈕），缺乏一致性。

圖示設計不直觀：按鈕圖示在“靜音”和“取消靜音”狀態下相同，未透過標籤或形狀變化來清晰指示狀態。

使用者認知負擔：使用者需要記住顏色含義，並推斷當前的系統狀態。

最佳化案例：Zoom的靜音按鈕

Zoom的設計結合了狀態指示器和狀態切換按鈕：圖示顯示當前狀態（如“話筒圖示”表示未靜音，帶斜線的圖示表示靜音）。按鈕標籤顯示切換後的狀態（如“取消靜音”或“靜音”）。

優點：圖示和標籤提供雙重資訊，降低使用者認知負擔。按鈕的操作直觀明瞭，使用者可快速判斷和切換狀態。

檢查設計時的關鍵問題：

狀態是否明確？

如果狀態不明確，優先採用雙控制元件設計。

是否有外部提示？

如果沒有提示，需透過控制元件明確傳遞當前狀態。

使用者是否需要快速判斷狀態？

如果是，優先提供清晰的狀態指示器和切換按鈕。